<template>
  <div class="app-container">
    <el-card>
      <div class="expert-title-outBox">
        <div class="expert-title">专家库/详情</div>
        <div class="back-btn" @click="handBack">
          <img src="@/assets/images/tripartite/back_button.png" alt="" />返回
        </div>
      </div>
      <!-- 基本信息 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>基本信息</span>
        </div>
        <el-descriptions border :column="3">
          <el-descriptions-item
            label="专家姓名"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.expertName }}</el-descriptions-item
          >
          <el-descriptions-item
            label="性别"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.sex==0?"男":'女' }}</el-descriptions-item
          >
          <el-descriptions-item
            label="政治面貌"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.politicalOutlook==0?'群众':'党员' }}</el-descriptions-item
          >
          <el-descriptions-item
            label="身份证号码"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.idNumber }}</el-descriptions-item
          >
          <el-descriptions-item
            label="年龄"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.age }}</el-descriptions-item
          >
          <el-descriptions-item
            label="手机号码"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.phoneNumber }}</el-descriptions-item
          >
          <el-descriptions-item
            label="电子邮箱"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.email }}</el-descriptions-item
          >
          <el-descriptions-item
            label="联系地址"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.contactAddress }}</el-descriptions-item
          >
          <el-descriptions-item
            label="录入时间"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.createTime }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <!-- 学历信息 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>学历信息</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item label="毕业学院">{{
            queryParams.graduateCollege
          }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{
            queryParams.major ==1?'计算机科学与技术':queryParams.major ==2?'通信技术':queryParams.major ==3?'AI人工智能':queryParams.major
          }}</el-descriptions-item>
          <el-descriptions-item label="学历">{{
            queryParams.education=='0'?'大专':queryParams.education=='1'?'本科':queryParams.education=='2'?'硕士':queryParams.education=='3'?'博士':'其他'
          }}</el-descriptions-item>
          <el-descriptions-item label="毕业时间">{{
            queryParams.graduationTime
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 单位信息 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>单位信息</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item label="工作单位">{{
            queryParams.workUnit
          }}</el-descriptions-item>
          <el-descriptions-item label="职务">{{
            queryParams.post
          }}</el-descriptions-item>
          <el-descriptions-item label="擅长领域">{{
            queryParams.areasOfExpertise=='0'?'土木工程'
            :queryParams.areasOfExpertise=='1'?'财务'
            :queryParams.areasOfExpertise=='2'?'环境保护'
            :queryParams.areasOfExpertise=='3'?'计算机技术'
            :queryParams.areasOfExpertise=='4'?'机械工程'
            :'其他'
          }}</el-descriptions-item>
          <el-descriptions-item label="工作年限">{{
            queryParams.workingYears + '年'
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 技术职称 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>技术职称</span>
        </div>
        <el-table :data="technicalTitles" border>
          <el-table-column label="职称名称" align="center" prop="jobTitle">
            <template slot-scope="scope">
              <span>{{ scope.row.jobTitle==1?'电子信息高级工程师':scope.row.jobTitle==2?'高校教授':'' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="通过时间"
            align="center"
            prop="passingTime"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="截止时间" align="center" prop="deadline">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.deadline) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="附件" align="center" prop="technicalFile">
            <template slot-scope="scope">
              <img
                src="@/assets/images/tripartite/icon_files.png"
                class="files-icon"
                v-show="scope.row.technicalFile"
              />
              <span>{{ scope.row.technicalFile }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 职业资格 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>职业资格</span>
        </div>
        <el-table :data="qualifications" border>
          <el-table-column label="资格名称" align="center" prop="qualificationName">
            <template slot-scope="scope">
             <span>{{
                  scope.row.qualificationName==1?'职业经理人'
                  :scope.row.qualificationName==2?'人力资源管理师'
                  :scope.row.qualificationName==3?'建筑材料员'
                  :scope.row.qualificationName==4?'企业法律顾问'
                  :''
                }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="资格证书号"
            align="center"
            prop="qcNo"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="注册单位"
            align="center"
            prop="registeredUnit"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="注册时间" align="center" prop="registrationTime" />
          <el-table-column label="过期时间" align="center" prop="expirationTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.expirationTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="附件" align="center" prop="qualificationFile">
            <template slot-scope="scope">
              <img
                src="@/assets/images/tripartite/icon_files.png"
                class="files-icon"
                v-show="scope.row.qualificationFile"
              />
              <span>{{ scope.row.qualificationFile }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 其他附件 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>其他附件</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item label="最高学历证书">
            <img
              src="@/assets/images/tripartite/icon_files.png"
              class="files-icon"
            />
            <a
                :href='queryParams.haCertificateFile'
                target="_blank"
                download="downloadFileName"
                class="demo-download"
                >{{ queryParams.haCertificateFile }}</a
              >
            </el-descriptions-item
          >
          <el-descriptions-item label="工作单位意见">
            <img
              src="@/assets/images/tripartite/icon_files.png"
              class="files-icon"
            />
            <a
                :href='queryParams.workUnitOpinionsFile'
                target="_blank"
                download="downloadFileName"
                class="demo-download"
                >{{ queryParams.workUnitOpinionsFile }}</a
              >
            </el-descriptions-item
          >
          <el-descriptions-item label="身份证"
            ><img
              src="@/assets/images/tripartite/icon_files.png"
              class="files-icon"
            />
            <a
                :href='queryParams.idCardFile'
                target="_blank"
                download="downloadFileName"
                class="demo-download"
                >{{ queryParams.idCardFile }}</a
              >
            </el-descriptions-item
          >
          <el-descriptions-item label="个人照片"
            ><img
              src="@/assets/images/tripartite/icon_files.png"
              class="files-icon"
            />
            <a
                :href='queryParams.personalPhotosFile'
                target="_blank"
                download="downloadFileName"
                class="demo-download"
                >{{ queryParams.personalPhotosFile }}</a
              >
            </el-descriptions-item
          >
        </el-descriptions>
      </div>
      <!-- 评审任务 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>评审任务</span>
        </div>
        <el-table :data="technicalList" border>
          <el-table-column label="任务名称" align="center" prop="roleId" />
          <el-table-column
            label="评审时间"
            align="center"
            prop="roleName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="评审地点"
            align="center"
            prop="roleKey"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="任务得分"
            align="center"
            prop="roleKey"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getExpert } from "@/api/tripartite/expert";
import { getExpertId } from "@/api/manage/manage";
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层（技术职称）
      technicalDialog: false,
      // 是否显示弹出层（职业资格）
      professionDialog: false,
      // 表单参数 （技术职称）
      technicalForm: {},
      // 表单校验 （技术职称）
      technicalRules: {},
      // 表单参数
      queryParams: {},
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
      },
      //技术职称列表
      technicalTitles: [{ files: "111" }],
      //职业资格列表
      qualifications:[],
      // 评审任务列表
      technicalList:[],
      expertId:'',//ID
    };
  },

  created() {
      this.getInfoId()
    // const expertId = this.expertId; 
  },
  methods: {
    /** 返回按钮操作 */
    handBack() {
      this.$router.push({
        path: "/tripartite/expert",
      });
    },
    /** 新增按钮操作 技术职称*/
    handleAdd() {
      this.technicalDialog = true;
      this.title = "添加技术职称";
    },
    /** 取消按钮 技术职称*/
    cancel() {
      this.technicalDialog = false;
    },
    /** 确定按钮 技术职称*/
    submitForm() {
      this.technicalDialog = false;
    },
    /** 新增按钮操作 职业资格*/
    handleAddProfession() {
      this.professionDialog = true;
      this.title = "添加职业资格";
    },
    //获取专家id
    getInfoId(){
        getExpertId().then(res =>{
            if(res.code==200){
                this.expertId=res.data.expertId
                this.getInfoDetails()
            }
        })
    },
    //获取详情
    getInfoDetails(){
        getExpert(this.expertId).then((response) => {
            console.log("获取专家详情", response);
            this.queryParams = response.data;
            this.technicalTitles =response.data.technicalTitles
            this.qualifications =response.data.qualifications
        });
    }
  },
};
</script>
<style scoped lang="scss">
.expert-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .expert-title {
    font-weight: 500;
    font-size: 18px;
  }
  .back-btn {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}
.submit-outBox {
  width: 100%;
  text-align: center;
  .btn {
    width: 200px;
  }
}
.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  margin-top: 24px;
  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
}
</style>
<style lang="scss">
/*表单label不加粗  */
label {
  font-weight: normal !important;
}

.expert-container {
  /* el-descriptions-item 文字居中 */
  .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    text-align: center;
  }
  /* 信息描述组件样式更改 */
  .descriptions-item-label {
    width: 266.67px;
  }
  .descriptions-item-content {
    // text-align: left !important;
    width: 266.67px;
  }
  // 文件图标样式更改
  .files-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    top: 4px;
  }
}
</style>
